<template>
  <div class="registered-con">
    <!-- 顶部图片 -->
    <img src="../../assets/logo.jpg" alt="" class="top">
    <van-form @submit="onSubmit">
      <!-- 上传头像 -->
      <!-- <div class="upload-img">
        <span>上传头像</span>
        <van-uploader :after-read="afterRead" />
      </div> -->
      <van-field
        v-model="loginName"
        name="账号"
        label="账号"
        :rules="[{ required: true, message: '请填写账号' }]"
      />
      <van-field
        v-model="userName"
        name="姓名"
        label="姓名"
        :rules="[{ required: true, message: '请填写姓名' }]"
      />
      <van-field
        v-model="phonenumber"
        type="number"
        name="手机号"
        label="手机号"
        :rules="[{ required: true, message: '请填写手机号' }]"
      />
       <van-field
        v-model="email"
        type="email"
        name="邮箱"
        label="邮箱"
        :rules="[{ required: true, message: '请填写邮箱号' }]"
      />
      <div class="verification">
        <van-field
          v-model="code"
          name="验证码"
          label="验证码"
          placeholder="验证码"
          :rules="[{ required: true, message: '请填写验证码' }]"
          class="code"
        />
        <van-button type="default" class="get-code" @click="getCode">点击获取</van-button>
      </div>
      <van-field
        v-model="password"
        type="password"
        name="密码"
        label="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit" @click="registry">提交</van-button>
      </div>
    </van-form>
  </div>
</template>
<script>
import {registry} from '../../api/forum-api'
import {code} from '../../api/forum-api'
import {uploadAvatar} from '../../api/forum-api'
export default {
  data() {
    return {
      loginName: "",
      userName: "",
      password: "",
      phonenumber: "",
      email: "",
      code: "",
      
    };
  },
  created() {
    
  },
  methods: {
    onSubmit(values) {
      this.$router.push("/login");
    },
    //上传头像
    // afterRead(file) {
    //   uploadAvatar(file).then(res=>{
    //     console.log(res)
    //   })
    //   console.log(file);
    // },
  
    //验证码
    getCode(){
        code(this.phonenumber).then(code=>{
            console.log(code)
        })
    },
    //注册
    registry(){
        registry(this.loginName,this.phonenumber,this.email,this.password,this.userName,this.code).then(res=>{
            console.log(res)
        }).catch(console.log("失败"))
    },
  }
};
</script>
<style lang="less" scoped>
.registered-con {
  padding: 20px 10px;
  //顶部图片
  .top{
    width: 100%;
    height: 180px;
  }
  .upload-img {
    font-size: 14px;
    padding: 10px 16px;
    span {
      margin-right: 10px;
    }
  }
  //出生日期
  .van-cell__title,
  .van-cell__value {
    -webkit-box-flex: none;
    -webkit-flex: none;
    flex: none;
  }
  .van-cell__title {
    width: 90px;
  }
  //验证码
  .verification {
    display: flex;
    .get-code {
      flex: 3;
      margin-top: 5px;
      height: 34px;
    }
    .code {
      flex: 7;
    }
  }
}
</style>